<template>
	<div id="centreRight1">
		<!-- <div class="bg-color-black">

			<span style="color:#5cd9e8">
				<svg-icon icon-class="alalist"></svg-icon>
			</span>
			<span class="fs-xl text mx-2">堆垛机报警信息</span>
		</div> -->
		<div class="d-flex">
			<!-- <dv-scroll-board :config="config" style="box-sizing:border-box;height:90%;width:95% " /> -->
			<el-row style="height: 20%; text-align: center;padding: 20px;">
				<el-col :span="24">堆垛机状态</el-col>
			
			</el-row>
			<el-row style="height: 15%;text-align: center;"  v-for="(item,index) in data11" :key="index">
				<el-col :span="12"
					style="height: 100%;text-align: right;padding: 6px 10px 0 0; ">{{item.COMMENTS}}
				</el-col>
				<el-col :span="12" style="height: 100%;text-align: left; ">
					
					<img v-if="item.msg=='正常'" style="width: 32px; height: 32px; " src="../../assets/xiaoyuanhuan-green.png">
					<img v-if="item.msg=='异常'" style="width: 32px; height: 32px; " src="../../assets/xiaoyuanhuan-yellow.png">
					<img v-if="item.msg=='未连接'" style="width: 32px; height: 32px; " src="../../assets/xiaoyuanhuan-red.png">
					
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import api from '@/http/api'
	import {
		deepCopy,
		formatDate,
		formatSeconds
	} from "@/utils/index";
	export default {
		data() {
			return {
				itemList: [],
				data11:[],
				// config: {
				// 	header: ["堆垛机", "信息"],
				// 	data: [

				// 	],
				// 	rowNum: 5, //表格行数

				// 	headerBGC: "transparent", //表头
				// 	oddRowBGC: "transparent", //奇数行
				// 	evenRowBGC: "transparent", //偶数行
				// 	align: ["left"],
				// 	columnWidth: [75, 200],
				// 	// index: true
				// }
			};
		},
		components: {},
		mounted() {
			this.fetchData();


		},
		methods: {
			fetchData() {
				// this.config.data = [];
				this.$http.get('/API/getDDJStatus', ).then((response) => {
					if (response.data.code == 0) {
						this.data11 = response.data.data;
						
						// this.data11 = map.map(( item )=>{
						// 	let ar =[];
						// 	ar.push(Object.keys(item)[0]) ;
						// 	ar.push(Object.values(item)[0]) ; 
						// 	return ar;
						// })
						
						// this.config.data = data11;


						// this.config = {
						// 	...this.config
						// }

						setTimeout(this.fetchData, 10000);
					}


				})

			},


		}
	};
</script>

<style lang="scss">
	#centreRight1 {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100%;
		width: 100%;

		.bg-color-black {
			height: 10%;
			padding-top: 25px;
		}

		.d-flex {
			width: 95%;
			flex: 2;
			padding: 0 20px 0 20px;

		}

		.dv-scroll-board .header {
			height: 30px;
		}


	}
</style>
